<template>
  <div>
    <div class="main-head flex-between container-fluid">
      <div class="title">
        <h1 v-text="$t('pro.billing.title')"></h1>
      </div>
    </div>
    <div class="content container-fluid">
      <div class="portlet belling">
        <div class="balance">
          <!-- <p v-pre>{{ vonce }}</p> 
          <p v-once>{{ vonce }}</p>
          <p >{{ vonce }}</p> -->
          <p class="prompt">{{ $t('pro.billing.balance') }} <strong>{{ balance }}</strong></p>
          <div class="notification flex-align-items">
            <a-checkbox @change="checkboxChange">{{ $t('pro.billing.notice') }}</a-checkbox>
            <!-- 暂时 -->
           <!-- <a-input-number
              style="margin-right: 10px;"
              :defaultValue="0"
              :min="0"
              :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
              :parser="value => value.replace(/\$\s?|(,*)/g, '')"
              @change="balanceLevelChange"
              :disabled="!checked"
            />
            <a-button type="primary" :disabled="!checked" @click="getNotify">{{ $t('pro.public.buttonSave') }}</a-button>-->
          </div>

        </div>
        <div class="deposit">

        <a-spin size="small" :spinning="spinning">
            <!-- isDefaultHtml： 是否显示Vue的支付页 （默认不显示）-->
            <div v-if="!spinning" v-show="isDefaultHtml">
              <p class="ask" v-text="$t('pro.billing.would')"></p>
              <nav class="nav">
                <a
                  @click="selectPaymentMode('Credit Card')"
                  :class="{'active':paymentMode=='Credit Card'}"
                  v-text="$t('pro.billing.credit')"
                ></a>
                <a
                  @click="selectPaymentMode('Wire Transfer')"
                  :class="{'active':paymentMode=='Wire Transfer'}"
                  v-text="$t('pro.billing.wire')"
                ></a>
                <a
                  @click="selectPaymentMode('PayPal')"
                  :class="{'active':paymentMode=='PayPal'}"
                >PayPal</a>
              </nav>
              <div class="deposit-methods-viewer">
                <template v-if="paymentMode=='Credit Card'">
                  <p class="ask" v-text="$t('pro.billing.deposit')"></p>
                  <div class="method">
                    <a-input-number
                            class="money-input"
                            :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                            :parser="value => value.replace(/\$\s?|(,*)/g, '')"
                            :min="1"
                            @change="onChangeCredit"
                            v-model="plusMoneyCredit"
                    />
                    <a-button type="primary" v-text="$t('pro.billing.deposit1')"></a-button>
                  </div>
                  <div style="font-size: 1rem">
                    {{ $t('pro.billing.Commission') }} ${{computCreditMoney}}
                  </div>
                </template>
                <template v-else-if="paymentMode=='Wire Transfer'">
                  <p class="ask" v-text="$t('pro.billing.canDeposit')"></p>
                  <p style="font-size: 1rem">{{ $t('pro.billing.please') }} <a href="mailto:巽丰科技@gmail.com">巽丰科技@gmail.com</a></p>
                </template>
                <template v-else>
                  <p class="ask" v-text="$t('pro.billing.deposit')"></p>
                  <div class="method paypal">
                    <a-input-number
                            class="money-input"
                            :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                            :parser="value => value.replace(/\$\s?|(,*)/g, '')"
                            v-model="plusMoneyPayPal"
                            :min="1"
                            @change="onChange"
                    />
                    <a-button type="primary" style="display: flex;align-item: center;">
                      <img
                              src="@/assets/ppcom-white.svg"
                              height="20"
                              style="margin-right: 10px;"
                              alt="PayPal"
                      >
                      <span v-text="$t('pro.billing.payment')"></span>
                    </a-button>
                  </div>
                  <p class="belling-footer" v-text="$t('pro.billing.collect')"></p>
                </template>
              </div>
            </div>

            <iframe
              v-if="!spinning"
              frameborder="0"
              style="margin: 0 auto;max-height: 1200px;min-height: 510px" 
              :srcdoc="htmlCode"
              width="80%">
            </iframe>
        </a-spin>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBalance, getBilling } from '../../api/user'
//工具
import { formatMoney } from '../../utils/tool'

//把在vue实例Data函数中不需要响应式的数据冻结，节省vue响应式不必要的开销
let freezeObj = {
  htmlCode:  "<span>我是span "+new Date().toLocaleTimeString()+"</span>", //静态模板字符串
};
Object.freeze(freezeObj)
export default {
  name: 'billing',
  data() {
    return {
      vonce: '我是once数据',
      paymentMode: 'Credit Card',
      checked: false,
      balance: 0,  //余额

      balanceLevel: 0,
      plusMoneyCredit: 0, // 行用卡
      plusMoneyPayPal: 0, // PayPal
      computCreditMoney: 0, // 信用卡付款3.5％

      isDefaultHtml: true,
      spinning: false,
      htmlCode: ``, //不需要响应式属性
      // v-pre
      //1. 编写.vue文件template模板中。可以在元素或者某个元素节点上 使用v-pre 指令。则该元素及子元素会跳过vue编译过程。
      //直接显示原始Mustache {{xxx}}. 跳过大量没有指令的节点，加快编译运行速度

      // v-once
      //2. 如果某一个元素或组件在页面只需要渲染一下，那么我们可以使用v-once 
      //以后的重新渲染该元素和他子节点都将视为静态内容并跳过, 这可以用于优化更新性能

      //Object.freeze() 
      //3. 在页面中，如果实例中的数据仅仅只作为显示，不会有响应式.(例如：固定的不会更新内容)
      // 之后的过程这个页面一般情况下不会响应变化。那么我们可以使用Object.freeze()冻结该对象，让其vue对他不做任何响应，跳过很多代码，节省响应开销
      // 不过在后续的不能使用this去操作他了，否则报错
    }
  },
  watch: {
    plusMoneyCredit(newVal) {
      if(!!newVal && newVal >= 0) {
        this.computCreditMoney = (newVal * 0.03627).toFixed(2)
      }else {
        this.computCreditMoney = 0
      }
    }
  },
  methods: {
    onChange (e) {
      console.log(`checked = ${e}`,this.plusMoneyPayPal)
    },
    onChangeCredit (e) {
      console.log(`Credit = ${e}`,this.plusMoneyPayPal)
    },
    checkboxChange(e) {
      this.checked = e.target.checked
    },
    selectPaymentMode(mode) {
      this.paymentMode = mode
    },
    getNotify() {

    },
    balanceLevelChange(value) {
      this.balanceLevel = value
    },
    initData() {
        getBalance().then(res => {
            let { code, data} = res.data || {}
            if (code == 200) {
                this.balance = formatMoney(data.surplus_amount, 2, '$');
            }
        })
    }
  },

  created () {
    this.initData();
  },

  mounted() {
      this.spinning = true;
      getBilling().then(res => {
          let {code, data} = res.data;
          if (code == 200) {
              this.htmlCode = data;
              this.isDefaultHtml = false;

              $(document).ready(function(){
                  $('.credit-card').addClass('dsp-active');
                  $('.anv-span-0').show()

                  $('.anv-span').bind('click',(e) => {
                      $(e.target).addClass('dsp-active')
                      $(e.target).siblings().removeClass('dsp-active');

                      switch($(e.target).html()) {
                          case '信用卡':
                              $('.anv-span-0').show();
                              $('.anv-span-0').siblings().hide()
                              break;

                          case '电汇':
                              $('.anv-span-1').show();
                              $('.anv-span-1').siblings().hide()
                              break;

                          case 'PayPal':
                              $('.anv-span-2').show();
                              $('.anv-span-2').siblings().hide()
                              break;
                      }
                  });

                  $('.deposit-0').bind('click', function () {
                      alert('你选择了存款功能')
                  });

                  $('.deposit-1').bind('click', function () {
                      alert('你选择了支付功能')
                  });
              });

          }
      }).finally(() => {
        this.spinning = false;
      })
  }
}
</script>


<style lang="less">
.belling {
  text-align: center;
}
.prompt {
  font-size: 26px;
}
#app.dark .prompt strong {
  color: #fff;
}
#app.white .prompt strong {
  color: #1da57a;
}

.notification {
  // display: flex;
  justify-content: center;
  // align-items: center;
}
@media screen and (max-width: 768px) {
  .notification {
    display: block;
    >div,
    >button {
      vertical-align: middle;
    }
  }
}
.balance,.deposit {
  padding-top: 20px;
  padding-bottom: 20px;
}
.balance {
  border-bottom: 1px solid #d9d9d9;
}
.deposit {
  font-size: 20px;
  line-height: 35px;
  background-color: #fff;
}
.ask {
  margin: 10px;
}
.ask + p {
  font-size: .8em;
}
.method {
  .money-input {
    width: 200px;margin-right: 10px;
  }
}

.paypal {
  display: flex;
  justify-content: center;
}
.belling-footer {
 font-size: 1rem;
}
</style>

<style lang="less" scoped>
.nav {
  font-size: .8em;
  font-weight: 500;
  justify-content: center;
  margin-bottom: 20px;
  > a {
    margin: 0 10px;
  }
}




</style>

<style>
  a {
    text-decoration:none;
    color: #1da57a
  }

  .title{
    font-size: 20px;
    line-height: 35px;
    color: rgba(0, 0, 0, 0.65);
  }
  .inline-block{
    display: inline-block;
    margin: 0 10px;
    cursor: pointer;
  }
  .anv-context {
    width: 500px;
    height: 200px;
    margin: 0 auto;
    display: none;
    overflow: hidden;
  }
  .ask{
    margin-top: 10px;
  }
  .ant-input-number-div {
    width: 200px;
    height: auto;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    overflow: hidden;
    line-height: 1.5;
    display: inline-block;
    margin-right: -88px;
  }
  .ant-input-number-div .ant-input-number-input {
    width: 100%;
    text-align: left;
    outline: 0;
    border: 0;
    border-radius: 4px;
    height: 30px;
    padding: 0 11px;
  }

  .dsp-button {
    color: #fff;
    background-color: #1da57a;
    border-color: #1da57a;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    height: 35px;
    padding: 0 15px;
    line-height: 1px;
  }


  .dsp-active{
    border-bottom: 2px solid  #1da57a;
  }
</style>

